<script setup lang="ts">
import type {MenuProps} from "ant-design-vue";
import { DownOutlined } from "@ant-design/icons-vue"
let dataSource = [
  {
    key: '1',
    domain: 'test.cc',
    port: 32,
    ver: '8.0',
    act: '',
  },

];

let  columns = [
  {
    title: '域名',
    dataIndex: 'domain',
    key: 'domain',
  },
  {
    title: '端口',
    dataIndex: 'port',
    key: 'port',
    width:120
  },
  {
    title: 'PHP版本',
    dataIndex: 'ver',
    key: 'ver',
    width:120
  },
  {
    title: '操作',
    dataIndex: 'act',
    key: 'act',
    width:100
  },
]
const handleMenuClick: MenuProps['onClick'] = e => {
  console.log('click', e);
};
</script>

<template>
  <a-card size="small">
    <a-row>
      <a-col :span="16"> <a-button type="primary">添加网站</a-button></a-col>
      <a-col :span="8">
        <a-input-search
          placeholder="域名"

        />
      </a-col>
    </a-row>
  </a-card>

  <a-card size="small" style="margin-top: 16px;">
    <a-table :dataSource="dataSource" :columns="columns"  :pagination="false" size="small" >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'act'">
          <a-dropdown>
            <template #overlay>
              <a-menu @click="handleMenuClick">
                <a-menu-item key="1">修改</a-menu-item>
                <a-menu-item key="2">访问</a-menu-item>
                <a-menu-item key="3">目录</a-menu-item>
              </a-menu>
            </template>
            <a-button>
              管理
              <DownOutlined />
            </a-button>
          </a-dropdown>
        </template>
      </template>

    </a-table>
  </a-card>
</template>
